<template>
  <div class="main">
    <div class="banner">
      <img src="../assets/images/gsjj-banner.png" alt="" />
    </div>
    <div class="center">
      <div class="map">
        <amap :zoom="11" :center="[configData.longitude, configData.latitude]">
          <amap-marker
            :position="[configData.longitude, configData.latitude]"
          />
        </amap>
      </div>
      <div class="cont">
        <div class="lf">
          <div class="head">联系我们</div>
          <div class="body" v-html="configData.contact"></div>
          <div class="foot">
            <p>
              <img src="../assets/images/tel-icon.png" alt="" />
              <span>{{ configData.phone }}</span>
            </p>
            <p>
              <img src="../assets/images/qq-icon.png" alt="" />
              <span>{{ configData.qq }}</span>
            </p>
            <p>
              <img src="../assets/images/email-icon.png" alt="" />
              <span>{{ configData.email }}</span>
            </p>
            <p>
              <img src="../assets/images/address-icon.png" alt="" />
              <span>{{ configData.address }}</span>
            </p>
            <!-- <p>(北京/雄安新区办事处请您递交上门拜访申请)</p> -->
          </div>
        </div>
        <div class="rt">
          <dl>
            <dt>选择地区</dt>
            <dd>
              <el-cascader
                size="large"
                :options="options"
                v-model="location"
                class="rt"
              >
              </el-cascader>
            </dd>
          </dl>
          <dl>
            <dt>时间段</dt>
            <dd>
              <el-date-picker
                class="rt"
                v-model="visit_time"
                type="date"
                placeholder="选择日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </dd>
          </dl>
          <dl>
            <dt>拜访事件</dt>
            <dd>
              <!-- <input type="text" class="rt" v-model="reason" /> -->
              <el-select class="rt" v-model="reason" placeholder="请选择">
                <el-option
                  v-for="item in reasonOptions"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </dd>
          </dl>
          <dl>
            <dt>描述问题</dt>
            <dd>
              <input type="text" class="rt" v-model="issue" />
            </dd>
          </dl>
          <dl>
            <dt>联系方式</dt>
            <dd>
              <input type="text" class="rt" maxlength="11" v-model="phone" />
            </dd>
          </dl>
          <div class="btn" @click="submite">提交</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { regionData, CodeToText } from "element-china-area-data";
export default {
  data() {
    return {
      reasonOptions:[],
      options: regionData, // 地区三级联动
      location: [], // 地址
      visit_time: null, // 拜访时间
      reason: "", // 拜访事件
      phone: "", // 联系方式
      issue: "", // 问题描述
      configData: [], // 配置信息
    };
  },
  created() {
    this.$http.getConfig().then((res) => {
      if (res.data.code === 0) {
        this.configData = res.data.data;
      } else {
        this.$message.error("请求失败，请重试！");
      }
    });
    this.$http.getShijian().then((res) => {
      if (res.data.code === 0) {
        this.reasonOptions = res.data.data;
      } else {
        this.$message.error('请求失败，请重试！')
      }
    });
  },
  methods: {
    submite() {
      this.location = this.location.map((item) => {
        let location = "";
        return (location += CodeToText[item]);
      });
      const isPhone = /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/;
      if (
        this.location[0] === undefined ||
        this.visit_time == null ||
        this.reason.trim().length <= 0 ||
        this.phone.trim().length <= 0 ||
        this.issue.trim().length <= 0
      ) {
        this.$message.error("请完善所有信息后再提交！");
      } else if (!isPhone.test(this.phone.trim())) {
        this.$message.error("请输入正确的手机号码！");
      } else {
        const params = new FormData();
        params.append(
          "location",
          this.location[0] + " " + this.location[1] + " " + this.location[2]
        );
        params.append("visit_time", this.visit_time);
        params.append("reason", this.reason);
        params.append("phone", this.phone);
        params.append("issue", this.issue);
        this.$http.postVisit(params).then((res) => {
          if (res.data.code === 0) {
            this.companyProfileData = res.data.data;
            this.$message({
              message: "提交成功！",
              type: "success",
            });
            this.location = [];
            this.visit_time = null;
            this.reason = "";
            this.phone = "";
            this.issue = "";
          } else {
            this.$message.error(res.data.msg);
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.banner {
  max-width: 1920px;
  height: 700px;
  position: relative;
  img {
    height: 100%;
    width: 100%;
  }
}
.center {
  max-width: 1200px;
  margin: 0 auto;
  font-family: PingFang SC;
  .map {
    width: 1200px;
    height: 510px;
  }
  .cont {
    display: flex;
    justify-content: space-between;
    padding-bottom: 86px;
    .lf {
      width: 516px;
      margin-top: 30px;
      .head {
        font-size: 48px;
        font-weight: bold;
        line-height: 67px;
        color: #333333;
      }
      .body {
        font-size: 20px;
        font-weight: 400;
        line-height: 40px;
        color: #333333;
        margin-top: 40px;
      }
      .foot {
        margin-top: 40px;
        p {
          margin-bottom: 10px;
          height: 26px;
          display: flex;
          align-items: center;
          font-size: 24px;
          font-weight: 400;
          line-height: 40px;
          color: #333333;
          img {
            width: 26px;
            height: 26px;
            margin-right: 10px;
          }
        }
        p:last-child {
          margin-top: 20px;
        }
      }
    }
    .rt {
      width: 464px;
      font-family: PingFang SC;
      dl {
        margin-bottom: 10px;
        dt {
          font-size: 24px;
          font-weight: 400;
          line-height: 40px;
          color: #333333;
        }
        dd {
          margin-top: 8px;
          input {
            width: 464px;
            height: 33px;
            padding-left: 15px;
            background: #ffffff;
            border: 1px solid #707070;
            border-radius: 4px;
            font-size: 16px;
          }
        }
      }
      .btn {
        width: 156px;
        height: 50px;
        background: #536786;
        border-radius: 4px;
        font-size: 20px;
        font-weight: 400;
        line-height: 50px;
        text-align: center;
        color: #ffffff;
        margin-top: 40px;
        cursor: pointer;
      }
    }
  }
}
::v-deep {
  .el-input__inner {
    width: 464px;
    height: 33px;
    background: #ffffff;
    border: 1px solid #707070;
    border-radius: 4px;
    font-size: 16px;
  }
  .el-input__prefix {
    display: none;
  }
  .el-input--prefix .el-input__inner {
    padding-left: 15px;
  }
  .el-input__icon{
    line-height: 33px;
  }
}
</style>
